.CheckboxWraper {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgb(0 0 0 / 88%);
  font-size: 14px;
  line-height: 1.5714;
  list-style: none;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  display: inline-flex;
  align-items: baseline;
  margin-inline-start: 0;
  margin-inline-end: 8px;
  cursor: pointer;
  gap: 4px;

  .Checkbox{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgb(0 0 0 / 88%);
    font-size: 14px;
    line-height: 1.5714;
    list-style: none;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
    position: relative;
    display: inline-block;
    outline: none;
    cursor: pointer;
    align-self: center;
    border-radius: 50%;

    .inner{
      box-sizing: border-box;
      position: relative;
      top: 0;
      inset-inline-start: 0;
      display: block;
      width: 16px;
      height: 16px;
      direction: ltr;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      border-collapse: separate;
      transition: all 0.3s;
    }

    // &::after{
    //   box-sizing: border-box;
    //   position: absolute;
    //   inset-block-start: 50%;
    //   inset-inline-start: 50%;
    //   display: block;
    //   width: 16px;
    //   height: 16px;
    //   margin-block-start: -8px;
    //   margin-inline-start: -8px;
    //   background-color: #fff;
    //   border-block-start: 0;
    //   border-inline-start: 0;
    //   border-radius: 16px;
    //   transform: scale(0);
    //   opacity: 0;
    //   transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    //   content: "";
    // }

    &.checked{
      // &::after{
      //   box-sizing: border-box;
      //   position: absolute;
      //   top: 50%;
      //   inset-inline-start: 21.5%;
      //   display: table;
      //   width: 5.714px;
      //   height: 9.14px;
      //   border: 2px solid #fff;
      //   border-top: 0;
      //   border-inline-start: 0;
      //   transform: rotate(45deg) scale(0) translate(-50%,-50%);
      //   opacity: 1;
      //   content: "";
      //   transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
      // }

      .inner {
        border-color: #ec008c;
        background-color: #ec008c;

        &::after{
          box-sizing: border-box;
          position: absolute;
          top:50%;

          // inset-inline-start: 21.5%;
          display: inline-block;
          width: 5.714px;
          height: 9.14px;
          border: 2px solid #fff;
          border-top: 0;
          border-left: 0;
          left: 25%;

          // border-inline-start: 0;
          transform: rotate(45deg)  translate(-50%,-50%);
          opacity: 1;
          content: "";

          // transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
        }
      }
    }

    input {
      position: absolute;
      inset: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
    }
  }
}
